<template>
  <div class="room-dashboard">


    <!-- Loading状态 -->
    <div v-if="loading" class="loading-state">
      <div class="loading-content">
        <el-loading-spinner></el-loading-spinner>
        <p>正在加载房间信息...</p>
        <p style="font-size: 12px; color: #999; margin-top: 10px;">Debug: loading = {{ loading }}</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div v-else-if="detailForm.abuildHomes && detailForm.abuildHomes.length > 0" class="main-content">
      <div class="content-header">
        <div class="header-left user-header-flex">
          <h3 class="page-title">
            <i class="el-icon-house"></i>
            <span>姓名：{{ userInfo.name || '-' }}</span>
                        <span>学工号：{{ userInfo.idCardNumber || '-' }}</span>
                        <span>卡号：{{ userInfo.cardNo || '-' }}</span>
          </h3>
      <!--    <div class="user-brief-info">
            
          </div> -->
        </div>
        <!-- <div class="header-actions">
          <el-button type="primary" size="medium" icon="el-icon-refresh" @click="refreshData">
            刷新数据
          </el-button>
        </div> -->
      </div>

      <div class="room-list-container">
        <div class="section-header">
          <div class="section-title">
            <i class="el-icon-office-building"></i>
            <span>房间列表</span>
          </div>
          <div class="header-right">
            <el-button 
              type="success" 
              size="small" 
              icon="el-icon-key" 
              :disabled="selectedRoomCount === 0"
              @click="handleBatchAddKeys"
            >
              批量添加卡片 ({{ selectedRoomCount }}个房间)
            </el-button>
          </div>
        </div>
        <div class="room-table">
          <el-table
            :data="detailForm.abuildHomes"
            border
            style="width: 100%; height: 100%"
            :header-cell-style="{ background: '#f8f9fa', color: '#495057', fontWeight: '600' }"
            @selection-change="handleSelectionChange"
            :max-height="600"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="房间位置" align="center" prop="roomName" width="350">
              <template slot-scope="scope">
                <div class="room-location">
                  <span class="location-text">
                    {{ scope.row.cellName || '-' }} / {{ scope.row.unitName || '-' }} / {{ scope.row.floorName || '-' }} / {{ scope.row.roomName }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="入住开始时间" align="center" prop="startTime" width="180">
              <template slot-scope="scope">
                <div class="time-info start-time">
                  <span>{{ scope.row.startTime }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="入住结束时间" align="center" prop="endTime" width="180">
              <template slot-scope="scope">
                <div class="time-info end-time">
                  <span>{{ scope.row.endTime }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" >
              <template slot-scope="scope">
                <el-button 
                  type="primary" 
                  size="mini" 
                  icon="el-icon-key" 
                  @click="handleAddKeyToRoom(scope.row)"
                >
                  添加卡片
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="!loading && detailForm.abuildHomes && detailForm.abuildHomes.length === 0" class="empty-state">
      <div class="empty-content">
        <div class="empty-icon">
          <i class="el-icon-house"></i>
        </div>
        <h3>暂无入住房间信息</h3>
        <p>该用户目前没有入住任何房间</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  props: {
    // 接收父组件传递的房间数据
    roomData: {
      type: Object,
      default: () => ({ abuildHomes: [] })
    },
    // 新增：接收用户信息
    userInfo: {
      type: Object,
      default: () => ({})
    },
    // 接收loading状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      detailForm: {
        abuildHomes: []
      },
      selectedRoomIds: [],
      selectedRows: []
    };
  },
  computed: {
    // 房间总数
    totalRoomCount() {
      return this.detailForm.abuildHomes ? this.detailForm.abuildHomes.length : 0;
    },
    // 当前选中的房间（多选时取第一个）
    selectedRoom() {
      if (!this.selectedRows.length || !this.detailForm.abuildHomes) {
        return null;
      }
      return this.selectedRows[0];
    },
    // 选中的房间数量
    selectedRoomCount() {
      return this.selectedRows.length;
    }
  },
  watch: {
    // 监听父组件传递的数据变化
    roomData: {
      handler(newVal) {
        console.log('Home组件接收到新数据:', newVal);
        this.detailForm = newVal;
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    console.log('Home组件已挂载，当前数据:', this.detailForm);
  },
  methods: {

    // 处理表格选择变化
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log('选中的房间:', selection);
    },


    // 刷新数据
    refreshData() {
      this.$emit('refresh');
      this.$message.success('数据已刷新');
    },

    // 导出数据
    exportData() {
      this.$message.success('数据导出功能开发中...');
    },

    // 添加房间
    addRoom() {
      this.$emit('add-room');
    },
   
   // 为选中房间添加钥匙
   handleAddKeyToRoom(room) {
     if (!room) {
       this.$message.warning('请先选择一个房间');
       return;
     }
     // 通过事件通知父组件弹出keyAuth对话框
     this.$emit('show-key-auth-dialog', {
       id: this.userInfo.id,
       userId: this.userInfo.id,
       tenantId: this.userInfo.id,
       homeId: room.id,
       cellId: room.cellId,
       unitId: room.unitId,
       floorId: room.floorId,
       phone: this.userInfo.phone,
       idCardNumber: this.userInfo.idCardNumber,
       name: this.userInfo.name,
       type: "2", // 默认为卡片类型
       // 添加房间信息
       roomInfo: room,
       selectedRooms: [room],
       isBatch: false,
       cardNo: this.userInfo.cardNo // 添加用户卡号
     });
   },
   
   // 批量添加钥匙
   handleBatchAddKeys() {
     if (this.selectedRoomCount === 0) {
       this.$message.warning('请先选择要添加钥匙的房间');
       return;
     }
     // 通过事件通知父组件弹出keyAuth对话框（处理第一个选中的房间）
     const firstSelectedRoom = this.selectedRows[0];
     this.$emit('show-key-auth-dialog', {
       id: this.userInfo.id,
       userId: this.userInfo.id,
       tenantId: this.userInfo.id,
       homeId: firstSelectedRoom.id,
       cellId: firstSelectedRoom.cellId,
       unitId: firstSelectedRoom.unitId,
       floorId: firstSelectedRoom.floorId,
       phone: this.userInfo.phone,
       idCardNumber: this.userInfo.idCardNumber,
       name: this.userInfo.name,
       type: "2", // 默认为卡片类型
       // 添加房间信息
       roomInfo: firstSelectedRoom,
       selectedRooms: this.selectedRows,
       isBatch: true,
       batchCount: this.selectedRoomCount,
       cardNo: this.userInfo.cardNo // 添加用户卡号
     });
   }
  }
};
</script>

<style lang="scss" scoped>


.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }

  .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      font-size: 24px;
      color: white;
    }
  }

  .stat-content {
    flex: 1;

    .stat-number {
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 14px;
      color: #7f8c8d;
      font-weight: 500;
    }
  }
}

.main-content {
  background: rgba(255, 255, 255, 0.95);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;

  .header-left {
    .page-title {
      margin: 0 0 8px 0;
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
      display: flex;
      align-items: center;
      gap: 12px;

      i {
        color: #667eea;
      }
    }

    .page-subtitle {
      margin: 0;
      font-size: 16px;
      color: #7f8c8d;
      font-weight: 400;
    }
  }

  .header-actions {
    .el-button {
      border-radius: 12px;
      font-weight: 600;
      padding: 12px 24px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
      }
    }
  }
}

.user-header-flex {
  display: flex;
  align-items: center;
  gap: 24px;
}
.user-brief-info span {
  margin-right: 18px;
  color: #666;
  font-size: 14px;
}

.room-list-container {
  background: #f8f9fa;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e9ecef;
  height: 700px;
  min-height: 700px;
}

.section-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .section-title {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    background: none;
    padding: 0;

    i {
      font-size: 20px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .room-count {
      font-size: 14px;
      opacity: 0.9;
      font-weight: 500;
    }
    
    .el-button {
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      
      &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }
  }
}

.room-table {
  flex: 1;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  .el-table {
    flex: 1;
    
    .el-table__body-wrapper {
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    .el-table__header-wrapper {
      overflow: hidden;
    }
  }
}

.room-location {
  .location-text {
    font-weight: 500;
    color: #303133;
  }
}

.time-info {
  font-size: 14px;
  color: #606266;
  
  &.start-time {
    color: #67c23a;
  }
  
  &.end-time {
    color: #f56c6c;
  }
}



.page-header {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-section {
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        font-size: 20px;
        color: #667eea;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .stats-section {
      display: flex;
      gap: 16px;

      .stat-item {
        text-align: center;
        padding: 8px 12px;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border-radius: 8px;
        color: white;
        min-width: 60px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .stat-number {
          display: block;
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 2px;
        }

        .stat-label {
          font-size: 10px;
          opacity: 0.9;
        }
      }
    }
  }
}

.room-info-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
    }

    .header-actions {
      display: flex;
      gap: 8px;
    }
  }

  .table-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
}

.room-info-table {
  .el-table {
    border-radius: 12px;
    overflow: hidden;

    .el-table__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

      th {
        background: transparent;
        color: white;
        font-weight: 600;
        border-bottom: none;
      }
    }

    .el-table__body {
      tr {
        transition: all 0.3s ease;

        &:hover {
          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          color: white;
          transform: scale(1.01);

          .room-location,
          .time-info {
            color: white;
          }
        }

        &.even-row {
          background-color: #fafbfc;
        }

        &.odd-row {
          background-color: white;
        }

        &.abnormal-row {
          background-color: #fef0f0;

          &:hover {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
          }
        }
      }
    }
  }
}

.room-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #606266;

  i {
    color: #409eff;
    font-size: 14px;
    flex-shrink: 0;
  }

  .location-text {
    font-weight: 600;
    line-height: 1.3;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.time-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  i {
    font-size: 14px;
    color: #667eea;
  }

  span {
    font-weight: 500;
  }
}

.time-info {
  &.start-time i {
    color: #67c23a;
  }

  &.end-time i {
    color: #e6a23c;
  }
}





.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;

  .empty-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .empty-icon {
      margin-bottom: 24px;

      i {
        font-size: 64px;
        color: #667eea;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    h3 {
      margin: 0 0 12px 0;
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
    }

    p {
      margin: 0 0 24px 0;
      color: #7f8c8d;
      font-size: 16px;
      line-height: 1.5;
    }

    .el-button {
      border-radius: 12px;
      font-weight: 600;
      padding: 12px 24px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
      }
    }
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;

  .loading-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .el-loading-spinner {
      margin-bottom: 16px;
    }

    p {
      margin: 0;
      color: #7f8c8d;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .room-table-container {
    padding: 12px;
  }

  .page-header {
    padding: 16px;

    .header-content {
      flex-direction: column;
      gap: 16px;

      .stats-section {
        gap: 12px;

        .stat-item {
          min-width: 60px;
          padding: 8px 12px;

          .stat-number {
            font-size: 18px;
          }

          .stat-label {
            font-size: 10px;
          }
        }
      }
    }
  }

  .room-info-section {
    padding: 16px;

    .section-header {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }
  }
}
</style>
